<template>
    <div class="station-train-page">
        <van-nav-bar class="help-tilte" left-arrow :fixed="true" :title="getTranlateName(stationInfo, 'name')" @click-left="$router.back(-1)">
        </van-nav-bar>
        <div style="padding: 23px;"></div>
        <div class="d-title">Direction</div>
        <div class="select-box">
            <select v-model="selectDirection" class="select-direction" @change="initStationInfo(stationInfo.id, selectDirection)">
                <option v-for="(item,index) in trainsData"  :value="item.id" class="options">{{ getTranlateName(item, 'name') }}</option>
            </select>
        </div>
        <div class="station-list-box">
            <div class="station-list-inbox">
                <div class="station-list-title">
                    <div class="train-time">Arrival</div>
                    <div class="train-time">Departure</div>
                    <div class="train-end">To</div>
                </div>
                <div class="station-list-items-box">
                    <div class="station-list-items" v-for="(item, index) in stationList" :key="index" v-if="stationInfo.nameEn != item.endStationEn && item.departureTime" @click="goToTrainDetail(item)">
                        <div class="train-time">{{ getStationTime(item.arrivalTime) }}</div>
                        <div class="train-time">{{ getStationTime(item.departureTime) }}</div>
                        <div class="train-end">{{ getTranlateName(item, 'endStation') }}</div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>
<script>
    import {getSelectDirection, getStationInfo} from '../../static/api/mgc_api'
    export default {
        name: 'TrainList',
        data() {
            return {
                trainsData:[],
                selectDirection: null,
                stationList: [],
                stationName: 'Yangon Central Railway',
                stationInfo: {}, // 上一个页面传入的站点信息
            };
        },
        methods: {
            getTranlateName(item, name) {
                let nameStr = ''
                if (this.$store.state.store.localLang == 'MM') {
                    nameStr = item[name + 'Zy']
                } else {
                    nameStr = item[name + 'En']
                }
                return nameStr
            },
            getStationTime(timeStr) {
                if (!timeStr) return
                let _start = timeStr.substring(0, 5)
                let _end = timeStr.substring(8)

                return _start + _end
            },
            initDirection(stationId) {
                let searchForm = {};
                searchForm.stationId = stationId;
                getSelectDirection(searchForm).then((res) => {
                    if (res.data.data.errorID == 0) {
                        this.trainsData = res.data.data.object || []
                        if (this.trainsData.length > 0) {
                            this.selectDirection = this.trainsData[0].id || ''
                            this.initStationInfo(stationId, this.selectDirection)
                        }

                    }else {
                        this.$toast(res.data.data.message)
                    }
                }).catch((error) => {
                    console.log(error)
                    this.$toast('error,please try again later')
                })
            },
            initStationInfo(stationId, directionId){
                let searchForm = {};
                searchForm.stationId = stationId;
                searchForm.directionId = directionId;
                getStationInfo(searchForm).then((res) => {
                    if (res.data.data.errorID == 0) {
                        this.stationList = res.data.data.object || []
                    }else {
                        this.$toast(res.data.data.message)
                    }
                }).catch((error) => {
                    console.log(error)
                    this.$toast('error,please try again later')
                })
            },
            goToTrainDetail(val){
                let queryObj = {
                    stationInfo: JSON.stringify(val),
                };
                this.$router.push({
                    path: '/train/station-schedule',
                    query:queryObj,
                })
            }


        },
        mounted() {
            if (this.$route.query.stationInfo) {
                this.stationInfo = JSON.parse(this.$route.query.stationInfo)
                this.initDirection(this.stationInfo.id)
            }
            // this.stationInfo = {
            //     id: 1,
            //     status: 1,
            //     nameEn: "Yangon Central Railway",
            //     nameMm: "ရန်ကုန်ဘူတာကြီး",
            //     townshipEn: "Mingalar Taung Nyunt",
            //     townshipMm: "မင်္ဂလာတောင်ညွန့်",
            //     lat: 16.781629,
            //     lng: 96.161524,
            //     createBy: null,
            //     createTime: null,
            //     updateBy: null,
            //     updateTime: null,
            //     nameZy: "ရန္ကုန္ဘူတာႀကီး",
            //     townshipZy: "မဂၤလာေတာင္ၫြန႔္"
            // }
            // this.initDirection(this.stationInfo.id)

        }
    }

</script>
<style>
    .station-train-page .van-nav-bar{
        background-color: #f2f2f2;
        color: #333;
    }
    .station-train-page .van-nav-bar .van-icon{
        color: #c8c8c8;
        margin-right: 15px;
        font-size: 18px;
    }
    .station-train-page .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
</style>
<style scoped>
    .select-box {
        display: block;
        width: 92%;
        position: relative;
        vertical-align: middle;
        padding: 0;
        overflow: hidden;
        background-color: #fff;
        color: #555;
        border: 1px solid #000;
        text-shadow: none;
        border-radius: 2px;
        transition: box-shadow 0.25s ease;
        z-index: 2;
        margin: 0 auto;
    }
    .select-box:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: #000;
        top: 50%;
        right: 8px;
        margin-top: -2px;
        cursor: pointer;
        z-index: -2;
    }
    select.select-direction {
        outline: none;
        appearance: none;
        -moz-appearance:none;
        -webkit-appearance:none;
        width: 100%;
        display: block;
        padding: 8px 8% 8px 4%;
    }
    select.select-direction:focus{
        outline: none;
    }
    .d-title{
        padding: 8px 4% 0;
    }
    .station-list-box{
        position: fixed;
        top: 114px;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .station-list-inbox{
        position: relative;
        padding-top: 45px;
        height: 100%;
        overflow: hidden;

    }
    .station-list-title{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        font-size: 14px;
        line-height: 20px;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }
    .train-time{
        width: 25%;
        padding-left: 8px;
    }
    .train-end{
        flex: 1;
        padding-left: 8px;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .station-list-items-box{
        height: 100%;
        overflow-y: scroll;
    }
    .station-list-items{
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }

</style>
